<template>
   <div ref="echarts" style="width:100%;height:100%"></div>
</template>

<script>
import echarts from 'echarts';
import Vue from 'vue';
import { on, off } from '../../utils/util'
Vue.prototype.$echarts = echarts;
export default {
    name:"echarts",
    props:{
        option:Object
        
    },
    data(){
        return {
            echartsInstance:undefined,
        }
    },
    mounted(){
        this.setOption(this.option)
    },
    methods:{
        resize () {
            this.echartsInstance.resize()
        },
        setOption(value){
            if(!this.echartsInstance){
                this.echartsInstance = this.$echarts.init(this.$refs.echarts);
            }
           
            this.echartsInstance.setOption(value);
            on(window, 'resize', this.resize)
        },
        getInstance(){
            return this.echartsInstance;
        }
    },
    watch:{
        option(value){
            this.setOption(value);
        }
    },
    beforeDestroy () {
        off(window, 'resize', this.resize)
    }
}
</script>

<style>

</style>